<template>
  <div class="main">
    <page-header></page-header>
    <back :showSearch="true"></back>
    <div class="content px-2">
      <div class="flex align-center mb-2 search_date">
        <el-date-picker
          class="eldatepicker"
          v-model="value"
          type="month"  
          value-format="yyyy-MM"
          format="yyyy-MM"  
          :picker-options="pickerOptions"
          @change="changTime"
        >
        </el-date-picker>
        <div @click="search" 
          class="colorfff flex-1 flex justify-end mr-1 pointer"
        >
          查看
        </div>
      </div>
      <div class="flex mb-2">
        <first ref='first'></first>
        <second ref='second'></second>
        <third ref='third'></third>
        <four ref='four'></four>
      </div>
      <div class="flex">
        <five ref='five'></five>
        <six ref='six'></six>
        <night ref='night'></night>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");
import pageHeader from "@/components/header.vue";
import back from "@/components/back.vue";
import first from "./components/first";
import second from "./components/second";
import third from "./components/third";
import four from "./components/four";
import five from "./components/five";
import six from "./components/six";
import night from "./components/night";
export default {
  name: "pageHome",
  components: {
    pageHeader,
    back,
    first,
    second,
    third,
    four,
    five,
    six,
    night,
  },
  data() {
    return {
      value:'',
      pickerOptions: {
        disabledDate(time) {
          // return time.getTime() >+ new Date("2021-04-01") || time.getTime() < +new Date("2020-01-01") 
          return time.getTime() >+ new Date("2021-06-01");
        }
      },
    };
  },
  mounted(){
    let date = new Date();
    this.value =  date.getFullYear() + '-' + this.checkDouble(date.getMonth()+1+'') 
    if(+new Date(this.value) > +new Date('2021-06-01')){
      this.value =  '2021-06-01'
    }
    this.refresh(this.value+'-01')
  },
  methods:{
    changTime(val){
      console.error(val)
      console.error(this.value)
    },
    checkDouble(val){
      if(val.length == 1){
        return '0'+val
      }
      return val
    },
     search(){
      this.refresh(this.value+'-01')
     },
     refresh(val){
       this.refreshCommon('first',val)
       this.refreshCommon('second',val)
       this.refreshCommon('third',val)
       this.refreshCommon('four',val)
       this.refreshCommon('five',val)
       this.refreshCommon('six',val)
       this.refreshCommon('night',val)
     },
     refreshCommon(refs,val){
       this.$refs[refs].time = val
       this.$refs[refs].dataOne()
     }

  }
};
</script>
<style lang="stylus" scoped>
.btnbg {
  width: 82px;
  height: 60px;
  background: url('../../assets/img/search/bg.png') no-repeat;
  background-size: 82px 60px;
  margin-left: -5px;
}

/deep/.el-input__inner {
  height: 50px;
  width: 570px;
  border-radius: 0;
  background-color: #0E215B;
}

/deep/.el-range-editor .el-range-input {
  background-color: #0E215B;
  color: #ffffff;
}

/deep/.el-date-editor .el-range-separator {
  line-height: 40px;
  color: #ffffff;
}
/deep/.eldatepicker .el-input__inner{
  height:50px !important; 
  width:200px;
  border: none;
  color: white;
  background: none !important;
}


.search_date { 
  width:280px;
  color: #fff;
  border: 1px solid #1C4DA4;
  background-color: #0e215b;
}
 
 
 
</style>
